<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            background: #ccc;
        }
    </style>

</head>
<body>
<canvas width="500" height="400" id="canvas">
    您的浏览器不支持canvas，请更新！
</canvas>
</body>
<script src="jquery.js"></script>
<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext("2d");
    var wbox=$("canvas").width();
    var wboy=$("canvas").height();
    $.ajax({
        type:"get",
        url:"salesdata.php",
        success:function (data) {
            var zhuW=wbox/(data.length*2+1);
           for(var i=0;i<data.length;i++){
               var g=ctx.createLinearGradient(zhuW*(i*2+1),wboy-data[i].value,zhuW*(i*2+1),400);
               g.addColorStop(0,"#fff");
               g.addColorStop(1,radomColor());
               ctx.fillStyle=g;
               ctx.textBaseline="top";
               ctx.fillRect(zhuW*(i*2+1),wboy-data[i].value,zhuW,data[i].value);
               ctx.fillStyle="#000";
               /*计算文字居中显示*/
               var widthValue=ctx.measureText((data[i].value)).width;
               var widthLabel=ctx.measureText((data[i].label)).width;
               ctx.fillText(data[i].value,zhuW*(i*2+1)+(zhuW-widthValue)/2,wboy-data[i].value-20)
               ctx.fillText(data[i].label,zhuW*(i*2+1)+(zhuW-widthLabel)/2,380);
           }
        }
    })

    function radomColor(){
        var r=parseInt(Math.random()*150+100);
        var g=parseInt(Math.random()*150+100);
        var b=parseInt(Math.random()*150+100);
        return "rgb("+r+","+g+","+b+")"
    }
</script>
</html>